﻿@model IEnumerable<SDAU.GCT.OA.Model.ActionInfo>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>权限</title>
    <link href="~/Content/jquery-easyui-1.5.5.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.5.5.4/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Content/jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/datapattern.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/MyAjaxForm.js"></script>
    <script type="text/javascript">
        $(function () {
            initTable();
            $("#addDialogDiv").css("display", "none");
            $("#editDialogDiv").css("display", "none");
            $("#setRoleDialogDiv").css("display", "none");
            $("#trIconUrl").css("display", "none");
            BindSearchBtnClick();


            bindCkbIsMenuClick();


            //绑定  上传图片按钮的点击事件
            bindUploadBtnClick();

        });
        function bindUploadBtnClick() {
            $("#btnUploadFile").click(function () {
                $("#addDialogDiv form").ajaxSubmit({
                    url: "/ActionInfo/UploadImage",
                    type: "Post",
                    success: function (data) {
                        //把返回的url地址放到页面的隐藏域
                        $("#MenuIcon").val(data);
                        $("#uploadImg").html("<img src='" + data + "' style='width:100px;height:100px;' />");          
                    }
                });
            });
        }
        function bindCkbIsMenuClick() {
            $("#ckbIsMenu").change(function () {
                $("#trIconUrl").toggle();
                $("#ckbIsMenu").val("true");

            })
        }
        function BindSearchBtnClick() {
            $("#btnSearch").click(function () {
                var data = { rchName: $("#txtName").val(), rchRemark: $("#txtRemark").val() };
                initTable(data);
            })
        }
        //初始化表格
        function initTable(SearchParams) {
            $('#tt').datagrid({
                url: '/ActionInfo/GetAllActionInfos',
                title: '演示表格使用',
                width: 700,
                height: 490,
                fitColumns: true,
                idField: 'Id',
                loadMsg: '正在加载权限的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: SearchParams,
                columns: [[
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'Id', title: '编号', width: 80 },
                    { field: 'ActionName', title: '权限名', width: 120 },
                    { field: 'Sort', title: '排序', width: 120 },
                    {
                        field: 'IsMenu', title: '是否是菜单', width: 40,
                        formatter: function (value, row, index) {
                            return value ? "是" : "否";
                        }
                    },
                    {
                        field: 'MenuIcon', title: '菜单图片', width: 120,
                        formatter: function (value, row, index) {
                            return "<img src='" + value + "' width='20px' height='20px' />";
                        }
                    },
                    { field: 'Remark', title: '备注', width: 120 },
                    {
                        field: 'Subtime', title: '提交时间', width: 80, align: 'right',
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s");
                        }
                    },
                    {
                        field: 'ModfiedOn', title: '操作', width: 80, align: 'right',
                        formatter: function (value, row, index) {
                            var str = "";
                            str += "<a href=javascript:void(0); class='EditLink' uid='" + row.Id + "'>编辑</a> &nbsp;&nbsp;&nbsp;";
                            str += "<a href=javascript:void(0); class='DeleteLink' uid='" + row.Id + "'>删除</a>";
                            return str;
                        }
                    }
                ]],
                toolbar: [{
                    id: 'btnDownShelf',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        addClickEvent();
                    }
                }, {
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        //确认删除窗口
                        var r = $.messager.confirm("提示", "您确认要删除所选数据吗？？！!", function (b) {
                            if (b) {
                                deleteEvent();
                            } else {
                                return;
                            }
                        });
                    }
                }, {
                    id: 'btnEdit',
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: function () {
                        var selectedRows = $('#tt').datagrid("getSelections");
                        if (selectedRows.length != 1) {
                            $.messager.alert("错误提醒", "请选中1条编辑数据！", "question");
                            return;
                        }
                        editEvent(selectedRows[0].Id);
                    }
                    },{
                        id: 'btnDetRole',
                        text: '设置角色',
                        iconCls: 'icon-redo',
                        handler: function () {
                            //确认删除窗口
                            setRole();
                        }
                    }],
                onHeaderContextMenu: function (e, field) {

                },
                onLoadSuccess: function (data) {
                    $(".EditLink").click(function () {
                        editEvent($(this).attr("uid"));
                        return false;
                    });
                    $(".DeleteLink").click(function () {
                        //确认删除窗口
                        var deletteid = $(this).attr("uid");
                        var r = $.messager.confirm("提示", "您确认要删除此条数据吗？？！!", function (b) {
                            if (b) {
                                deleteSingleEvent(deletteid);
                                return false;
                            } else {
                                return;
                            }
                        });
                    });
                }

            });

        }
        //设置角色
        function setRole() {
            var selectedRows = $('#tt').datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("错误提醒", "请选中1个权限设置角色！", "question");
                return;
            }

            $("#setRoleFrame").attr("src", "/ActionInfo/setRole/" + selectedRows[0].Id);
            $("#setRoleDialogDiv").css("display", "block");
            $("#setRoleDialogDiv").dialog({
                title: "设置角色",
                modal: true,
                width: 400,
                height: 400,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    id: 'btnOk',
                    text: '保存',
                    iconCls: 'icon-ok',
                    handler: function () {
                        $("#setRoleFrame")[0].contentWindow.submitForm();
                    }
                }, {
                    id: 'btnCancel',
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#setRoleDialogDiv").dialog("close");
                    }
                }]

            });

        }
        //设置角色完成，关闭对话框
        function afterSetRole() {
            $("#setRoleDialogDiv").dialog("close");
            initTable();
        }
        //当权限点击添加时候，弹出一个添加的对话框
        function addClickEvent() {
            $("#addDialogDiv").css("display", "block");
            $("#addDialogDiv").dialog({
                title: "添加权限",
                modal: true,
                width: 400,
                height: 400,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    id: 'btnOk',
                    text: '添加',
                    iconCls: 'icon-ok',
                    handler: subAddForm
                }, {
                    id: 'btnCancel',
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#addDialogDiv").dialog("close");
                    }
                }]

            });
        }
        //批量删除+单条删除
        function deleteEvent() {
            //第一步拿到  easyui里面的选中的项
            var selectedRows = $('#tt').datagrid("getSelections");
            if (selectedRows.length <= 0) {
                //error,question,info,warning.
                $.messager.alert("错误提醒", "请选中删除数据！", "question");
                return;
            }
            var ids = "";
            // 把数据删除
            for (var key in selectedRows) {
                ids = ids + selectedRows[key].Id + ",";
            }
            //ids:     1,2,       4,5,6,
            ids = ids.substr(0, ids.length - 1);

            $.post("/ActionInfo/Delete", { ids: ids }, function (data) {
                if (data == "ok") {
                    //刷新表格
                    initTable();
                } else {
                    $.messager.alert("提醒消息", "删除失败", "error");
                }
            });
        }
        //删除单条数据
        function deleteSingleEvent(id) {
            $.post("/ActionInfo/Delete", { ids: id }, function (data) {
                if (data == "ok") {
                    //刷新表格
                    initTable();
                } else {
                    $.messager.alert("提醒消息", "删除失败", "error");
                }
            });
        }
        //编辑权限
        function editEvent(id) {


            $("#editFrame").attr("src", "/ActionInfo/Edit/" + id);

            $("editDialogDiv").css("display", "block");
            $("#editDialogDiv").dialog({
                title: "修改权限",
                modal: true,
                width: 500,
                height: 500,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    id: 'btnOk',
                    text: '修改',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //调用子容器的方法
                        $("#editFrame")[0].contentWindow.submitForm();
                    }
                }, {
                    id: 'btnCancel',
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#editDialogDiv").dialog("close");
                    }
                }]

            });
        }

        //修改成功之后由子窗体调用
        function afterEditSuccess() {
            $("#editDialogDiv").dialog("close");
            initTable();
        }

        //表单提交后台
        function subAddForm() {
            $("#addDialogDiv form").submit();
        }

        //添加成功过之后执行的代码
        function afterAdd(data) {
            if (data == "ok") {
                //关闭对话框刷新表格
                $("#addDialogDiv").dialog("close");
                initTable();
            } else {
                $.messager.alert(data);
            }
        }
    </script>
</head>
<body>
    @*权限名：<input type="text" id="txtName" value="" />
        备注：<input type="text" id="txtRemark" value="" />
        <input type="button" id="btnSearch" value="搜索" />*@
    <div>
        <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>
    </div>

    <!----------------弹出来的添加的 对话框- 开始------------>
    <div id="addDialogDiv">
        @using (Ajax.BeginForm("Add", "ActionInfo", new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd" }, new { enctype = "multipart/form-data", }))
        {
            <table class="t3">
                <tr>
                    <td>权限名：</td>
                    <td>
                        <input type="text" name="ActionName" />
                    </td>
                </tr>
                <tr>
                    <td>URL：</td>
                    <td>
                        <input type="text" name="Url" />
                    </td>
                </tr>

                <tr>
                    <td>Http方法类型：</td>
                    <td>
                        <select name="HttpMetho d">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>是否是菜单：</td>
                    <td><input type="checkbox" id="ckbIsMenu" value="false" name="IsMenu" /></td>
                </tr>

                <tr id="trIconUrl">
                    <td>菜单的图标地址：</td>
                    <td>
                        <input type="hidden" id="MenuIcon" name="MenuIcon" />
                        <input type="file" id="fileMenuIcon" name="fileMenuIcon" />
                        <input type="button" value="上传" id="btnUploadFile" />
                        <div id="uploadImg">

                        </div>

                    </td>
                </tr>
                <tr>
                    <td>排序：</td>
                    <td>
                        <input type="text" name="Sort" />
                    </td>
                </tr>
                <tr>
                    <td>备注：</td>
                    <td>
                        <input type="text" name="Remark" />
                    </td>
                </tr>
            </table>
        }
    </div>
    <!----------------弹出来的添加的 对话框- 结束------------>
    <!----------------弹出来的修改的 对话框- 开始------------>
    <div id="editDialogDiv">
        <iframe id="editFrame" src="javascript:void(0)" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
    </div>
    <!----------------弹出来的修改的 对话框- 结束------------>
    <div id="setRoleDialogDiv">
        <iframe id="setRoleFrame" src="javascript:void(0)" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
    </div>
</body>
</html>
